import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { BottomBar } from './BottomBar'
import { getArticleById } from './fake-api'



function HistoryBar(){
    const leftButton = <svg t="1627704052212" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8108" width="18" height="18"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" p-id="8109" fill="#007FFF"></path></svg>
    const history = useHistory()
    useEffect(()=>{
        const backButton = document.getElementsByClassName('backButton')[0]
        function pushBack(){
            history.goBack()
        }
        backButton.addEventListener('click',pushBack)
        return()=>{
            backButton.removeEventListener('click',pushBack)
        }
    })
    
    return(
        <div >
            <div className='historyBar' style={{height:55,backgroundColor:'#fff',display:'flex',alignItems:'center',position:'fixed',top:0,width:375,justifyContent:'space-between'}}>
                <div className='backButton' style={{height:'100%',display:'flex',alignItems:'center',marginLeft:10}}>
                    {leftButton}
                </div>
                <div className='content' style={{textAlign:'center',fontSize:'18px',lineHeight:'55px',color:'#007FFF'}}>
                    历史记录
                </div>
                <div className='space' style={{width:28,height:55}}>

                </div>
            </div>
            
        </div>
    )
}
function getTime(time) {
    var temp = new Date(time*1000)     
    return (temp.getMonth()+1)+'-'+(temp.getDate())+' '+(temp.getHours()<10?'0'+temp.getHours():temp.getHours())+':'+(temp.getMinutes()<10?'0'+temp.getMinutes():temp.getMinutes())
 }
function HistoryBox({Id:id,time:Time,id:ID}){
    // console.log(id+'!'+Time)
    const [data,setData] = useState(null)
    const recentTime = getTime(Time)
    const [width,setWidth] = useState(375)
    const history = useHistory()
    useEffect(()=>{
        async function getDetail(){
            const data = await getArticleById(id)
            setData(data.data.article)
        }
        // console.log(data)
        getDetail()
    })
    useEffect(()=>{
        const Box = document.getElementById(ID)
        let start,end,diff

        const touchstart = (e)=>{
            start = e.touches[0].pageX
        }
        const touchmove = (e)=>{
            end = e.touches[0].pageX
            diff = start-end
            Box.style.transition='all 0.3s'
        }
        const touchend = ()=>{
            if(diff>50)
                setWidth(275)
            else if(diff<50)
                setWidth(375)
        }
        Box.addEventListener('touchstart',touchstart)
        Box.addEventListener('touchmove',touchmove)
        Box.addEventListener('touchend',touchend)
        return()=>{
            Box.removeEventListener('touchstart',touchstart)
            Box.removeEventListener('touchmove',touchmove)
            Box.removeEventListener('touchend',touchend)   
        }
    })
    useEffect(()=>{
        const Box = document.getElementById(ID)
        const handleClick=async()=>{
            history.push('/post/'+data.article_id)
            // console.log(data.article_id)
            let time = (new Date(new Date()).getTime()/1000).toFixed(0)
            const result = await axios.post('https://qc6d2t.fn.thelarkcloud.com/storageHistory',{id:data.article_id,time:time}).catch(error=>console.log(error))
            return(result)
        }
        Box.addEventListener('click',handleClick)
        return()=>{
            Box.removeEventListener('click',handleClick)
        }
    })
    useEffect(()=>{
        const close = document.getElementsByClassName('close')[ID]
        const deleteHistory = async()=>{
            const result = await axios.post('https://qc6d2t.fn.thelarkcloud.com/deleteHistory',{id:data.article_id}).catch(error=>console.log(error))
            window.location.reload()
            return result
        }
        close.addEventListener('click',deleteHistory)
        return()=>{
            close.removeEventListener('click',deleteHistory)
        }

    })
    return(
        <div style={{display:'flex',justifyContent:'center',width:375}}>
            <div className='historyBox' id={ID} style={{borderTop:'1px solid #f4f5f5',width:width,padding:'10px 15px 5px 15px',boxSizing:'border-box',display:'flex',flexWrap:'wrap',alignItems:'center',borderBottom:'1px solid #f4f5f5'}}>
                <div className='title' style={{fontSize:'16px',height:24,textOverflow:'ellipsis',whiteSpace:'nowrap',overflow:'hidden',width:'100%',fontWeight:'700',marginTop:'5px',margin:'0 5px'}}>
                    {data?data.article_info.title:''}
                </div>
                <div className='nameAndBrief' style={{fontSize:'13px',lineHeight:"22px",height:66,display:'flex',margin:'5px 5px',width:'100%',flexWrap:'wrap'}}>
                    <div className='name' style={{fontWeight:'600',height:22}}>
                        {data?data.author_user_info.user_name:''}
                    </div>
                    <div className='brief' style={{height:44,WebkitLineClamp:'2',display:'-webkit-box',WebkitBoxOrient:'vertical',overflow:'hidden',width:'100%',lineHeight:'22px',color:'#86909C'}}>
                        {data?data.article_info.brief_content:''}
                    </div>
                </div>
                <div className='historyBottom' style={{height:22,fontSize:'13px',lineHeight:'22px',display:'flex',margin:'0 5px',color:'#415969',width:width}}>
                    <div className='LikeAndComment' style={{display:'flex',width:'70%'}}>
                        <div className='like'>
                            {data?data.article_info.collect_count+'赞同':''}
                        </div>
                        <div style={{width:17,height:22,display:'flex',alignItems:'center',justifyContent:'center'}}>
                            <div className='point' style={{height:2,width:2,borderRadius:'100%',backgroundColor:'#4e5969'}}/>
                        </div>
                        <div className='comment'>
                            {data?data.article_info.comment_count+'评论':''}
                        </div>
                    </div>
                    <div className='time' style={{width:'30%',textAlign:'right'}}>
                            {recentTime}
                        </div>
                </div>
                
            </div>
            <div className='close' style={{display:width===275?'':'none',backgroundColor:'#007fff',width:100,color:'#ddd',textAlign:'center',height:134,lineHeight:'134px',transition:'all 0.3s'}}>
                删除
            </div>
        </div>
    )
}

function HistoryList(){
    const [history,setHistory] = useState(null)
    const [page,setPage] = useState(0)
    useEffect(()=>{
        async function init(){
            const data = await axios.post('https://qc6d2t.fn.thelarkcloud.com/getHistory',{page:page}).catch(error=>console.log(error))
            setHistory(data.data.historyList)
            setPage(page+1)
        }
        if(page===0)
            init()
    },[page,history])
    // console.log(history)
    useEffect(()=>{
        async function getMore(){
            const data = await axios.post('https://qc6d2t.fn.thelarkcloud.com/getHistory',{page:page}).catch(error=>console.log(error))
            setHistory(a=>a.concat(data.data.historyList))
            setPage(page+1)
            // console.log(history)
        }
        const a = document.getElementsByClassName('historyList')[0]
        function handleScroll(){
            let top = a.scrollTop
            let height = a.scrollHeight-757
            if(top===height)
                {getMore();}
            // console.log(top+'='+height)
            // console.log(history)
        }
        // console.log(a)
        a.addEventListener('scroll',handleScroll)
        return()=>{
            a.removeEventListener('scroll',handleScroll)
        }
    })
    return(
        <div style={{backgroundColor:'#fff',marginBottom:'50px',overflow:'scroll',height:757}} className='historyList'>
            <div className='space' style={{height:55}}>

            </div>
            <div className='space' style={{height:20,backgroundColor:'#f4f5f5'}}>

            </div>
            {   history?
                history.map((i,index)=>{
                    return <div key={index}><HistoryBox Id={i.ArticleId} time={i.time} id={index}/></div>
                }):''
            }
        </div>
    )
}

export  function History(){
    
    return (
        <div>
            <HistoryBar/>
            <HistoryList/>
            <BottomBar Tab={'history'}/>
        </div>
    )
}